<template>
  <div class="user-center-page">
    <h1 class="page-title">用户个人中心</h1>

    <div class="container">
      <!-- 左侧按钮区域 -->
      <div class="button-column left-column">
        <button
          class="menu-button"
          :class="{ active: activeTab === 'profile' }"
          @click="activeTab = 'profile'"
        >
          个人信息管理
        </button>
        <button
          class="menu-button"
          :class="{ active: activeTab === 'volunteer' }"
          @click="activeTab = 'volunteer'"
        >
          志愿者申请
        </button>
        <button
          class="menu-button"
          :class="{ active: activeTab === 'volunteerCenter' }"
          @click="activeTab = 'volunteerCenter'"
        >
          志愿者中心
        </button>
      </div>

      <!-- 中间内容展示区域 -->
      <div class="content-area">
        <component
          :is="currentComponent"
          :key="activeTab"
          @application-updated="handleApplicationUpdated"
          @profile-updated="handleProfileUpdated"
        />
      </div>

      <!-- 右侧按钮区域 -->
      <div class="button-column right-column">
        <button
          class="menu-button"
          :class="{ active: activeTab === 'events' }"
          @click="activeTab = 'events'"
        >
          比赛管理
        </button>
        <button
          class="menu-button"
          :class="{ active: activeTab === 'notification' }"
          @click="activeTab = 'notification'"
        >
          通知中心
        </button>
        <button class="menu-button logout-button" @click="handleLogout">
          退出登录
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ProfilePage from "./profile/index.vue"
import VolunteerPage from "./volunteer/index.vue"
import EventsPage from "./events/index.vue"
import NotificationPage from "./Notification/index.vue"
import VolunteerCenterPage from "./volunteer/VolunteerCenter.vue" // 新增导入

interface UserInfo {
  name: string
  email: string
}

const router = useRouter()

// 响应式数据
const activeTab = ref<'profile' | 'volunteer' | 'volunteerCenter' | 'events' | 'notification'>('profile')
const userName = ref<string>('用户')

// 计算属性
const currentComponent = computed(() => {
  const componentMap = {
    profile: ProfilePage,
    volunteer: VolunteerPage,
    volunteerCenter: VolunteerCenterPage, // 新增
    events: EventsPage,
    notification: NotificationPage
  }
  return componentMap[activeTab.value]
})

// 事件处理
const handleApplicationUpdated = (): void => {
  console.log('Application updated')
}

const handleProfileUpdated = (userData: UserInfo): void => {
  console.log('Profile updated:', userData)
  if (userData.name) {
    userName.value = userData.name
  }
}

// 退出登录
const handleLogout = (): void => {
  if (confirm('确定要退出登录吗？')) {
    localStorage.removeItem('token')
    localStorage.removeItem('userId')
    localStorage.removeItem('userInfo')
    router.push('/login')
  }
}

// 生命周期
onMounted(() => {
  // 从本地存储获取用户信息
  const userInfoStr = localStorage.getItem('userInfo')
  if (userInfoStr) {
    try {
      const userInfo: UserInfo = JSON.parse(userInfoStr)
      userName.value = userInfo.name || '用户'
    } catch (error) {
      console.error('解析用户信息失败:', error)
    }
  }
})
</script>

<style scoped>
/* 样式保持不变，与您现有的相同 */
.user-center-page {
  width: 100%;
  height: 100%;
}

.page-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 0;
  color: #2E7D32;
  text-shadow: 0 0 6px rgba(56, 142, 60, 0.4);
  background: linear-gradient(to right, #2E7D32, #81C784);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: '微软雅黑 Light', sans-serif;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: calc(100vh - 150px);
  gap: 30px;
  padding: 20px;
  box-sizing: border-box;
  min-width: 0;
}

.button-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 15%;
  height: 100%;
  flex-shrink: 0;
}

.left-column {
  align-items: flex-start;
}

.right-column {
  align-items: flex-end;
}

.menu-button {
  width: 100%;
  padding: 20px 15px;
  margin: 15px 0;
  background: linear-gradient(to right, #66BB6A, #43A047);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: '微软雅黑 Light', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.menu-button:hover {
  background: linear-gradient(to right, #558B2F, #388E3C);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.menu-button.active {
  background: linear-gradient(to right, #558B2F, #388E3C);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.logout-button {
  background: linear-gradient(to right, #e74c3c, #c0392b);
}

.logout-button:hover {
  background: linear-gradient(to right, #c0392b, #a93226);
}

.content-area {
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #A5D6A7;
  border-radius: 12px;
  padding: 30px;
  box-sizing: border-box;
  min-height: 500px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.1),
    inset 0 0 10px rgba(129, 199, 132, 0.2);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .container {
    gap: 20px;
  }

  .button-column {
    width: 200px;
  }
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    height: auto;
    gap: 20px;
  }

  .button-column {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .menu-button {
    width: 48%;
    margin: 5px 1%;
    padding: 15px 10px;
    font-size: 16px;
  }

  .content-area {
    min-height: 400px;
    padding: 20px;
  }

  .page-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .menu-button {
    width: 100%;
    margin: 3px 0;
  }
}
</style>
